<template>
  <el-card>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-input
          v-model="name"
          placeholder="请输入部门名称"
          prefix-icon="el-icon-search"
          class="searchInput"
          clearable
        />
        <el-tree
          ref="tree"
          :data="treeListData"
          :props="defaultProps"
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
        />
      </el-col>
      <el-col :span="20">
        <el-form :inline="true" :model="form">
          <el-form-item label="账号">
            <el-input v-model="form.username" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="form.nickname" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item style="float: right">
            <el-button type="success" @click="handleAdd" v-if="$formatFR(user.add)">新增</el-button>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 表格部分 -->
        <el-table :data="tableData" style="width: 100%" row-key="id">
          <el-table-column type="index" label="序号" width="50" align="center" />
          <el-table-column prop="username" label="账号" align="center" />
          <el-table-column prop="nickname" label="姓名" align="center" />
          <el-table-column label="性别" align="center" width="50" prop="sex">
            <template slot-scope="scope">
              {{ scope.row.sex === "M" ? "男" : "女" }}
            </template>
          </el-table-column>
          <el-table-column prop="email" label="邮箱" align="center" show-overflow-tooltip />
          <el-table-column prop="mobile" label="手机号" align="center" />
          <el-table-column prop="deptName" label="部门名称" align="center" />
          <el-table-column label="角色" align="center" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.roles.length">
              <el-tag v-for="item in scope.row.roles" :key="item.id" size="mini">
                {{ item.roleName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="60">
            <template slot-scope="scope">
              <el-tag type="info" size="mini" v-if="scope.row.locked === 'Y'">无效</el-tag>
              <el-tag size="mini" v-if="scope.row.locked === 'N'">有效</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column label="操作" align="center" width="300">
            <template slot-scope="scope">
              <el-link
                size="mini"
                type="warning"
                plain
                :style="{ marginRight: '0.0521rem' }"
                @click="handleUpdate(scope.row)"
                v-if="$formatFR(user.edit)"
              >
                编辑
              </el-link>
              <el-link
                size="mini"
                type="warning"
                plain
                :style="{ marginRight: '0.0521rem' }"
                @click="handleRole(scope.row)"
                v-if="$formatFR(user.role)"
              >
                角色
              </el-link>
              <el-link
                type="primary"
                size="mini"
                plain
                :style="{ marginRight: '0.0521rem' }"
                @click="handleReset(scope.row.id)"
                v-if="$formatFR(user.reset)"
              >
                重置密码
              </el-link>
              <el-link
                type="danger"
                size="mini"
                plain
                @click="handleDel(scope.row.id)"
                v-if="scope.row.username !== 'sysadmin' && $formatFR(user.del)"
              >
                删除
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <base-pagination
          :size="form.size"
          :current="form.current"
          :total="total"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        ></base-pagination>
      </el-col>
    </el-row>
    <AddEditDialog ref="AddEditDialog" @updatePage="reset"></AddEditDialog>
    <RoleDialog ref="RoleDialog" @updatePage="reset" />
  </el-card>
</template>

<script>
import { userPage, del, reset } from "@/api/system/user"
import { treeList } from "@/api/system/dept"
import AddEditDialog from "./components/AddEditDialog.vue"
import RoleDialog from "./components/RoleDialog.vue"
import FUNCROLELIST from "@/utils/func_role/system"
export default {
  components: { AddEditDialog, RoleDialog },
  data() {
    return {
      user: FUNCROLELIST.user,
      total: 0,
      tableData: [],
      form: {
        nickname: "",
        username: "",
        deptId: "",
        size: 10,
        current: 1
      },
      name: "",
      treeListData: [],
      defaultProps: {
        children: "children",
        label: "deptName"
      }
    }
  },
  watch: {
    name(val) {
      console.log(val)
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.getTreeList()
    this.getList()
  },
  methods: {
    reset() {
      this.form = {
        nickname: "",
        username: "",
        deptId: "",
        size: 10,
        current: 1
      }
      this.name = ""
      this.getList()
      this.getTreeList()
    },
    // 新增
    handleAdd() {
      this.$refs.AddEditDialog.init(this.treeListData)
    },
    // 编辑
    handleUpdate(row) {
      this.$refs.AddEditDialog.init(this.treeListData, row)
    },
    handleRole(row) {
      this.$refs.RoleDialog.init(row)
    },
    handleDel(id) {
      this.$confirm("请确认是否删除当前用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        del(id).then(() => {
          this.getList()
          this.$message({
            type: "success",
            message: "用户删除成功"
          })
        })
      })
    },
    // 重置
    handleReset(id) {
      this.$confirm("请确认是否重置当前用户密码?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        reset(id).then(() => {
          this.getList()
          this.$message({
            type: "success",
            message: "重置密码成功"
          })
        })
      })
    },
    // 用户权限
    handleUser(scope) {
      this.$refs.userDialog.open(scope)
    },
    // 搜索
    handleSearch() {
      this.getList()
    },

    // 分页
    handleCurrentChange(val) {
      this.form.current = val
      this.getList()
    },
    handleSizeChange(val) {
      this.form.size = val
      this.getList()
    },
    // 获取用户列表
    getList() {
      userPage(this.form).then((res) => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    // 获取用户树列表
    getTreeList() {
      treeList({ name: this.name }).then((res) => {
        this.treeListData = res.data
        // this.getList()
      })
    },
    handleNodeClick(data) {
      this.form.current = 1
      this.form.deptId = data.id
      this.getList()
    },
    // 模糊查询
    filterNode(value, data) {
      console.log(value, data)
      if (!value) return true
      return data.deptName.indexOf(value) !== -1
    },
    updataDel() {
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.searchInput {
  margin-bottom: 20px;
}
</style>
